<template>
  <div class="user-permissions-container">
    <div class="header">
      <h1>用户权限管理</h1>
      <div class="search-box">
        <el-input
          v-model="searchQuery"
          placeholder="搜索用户..."
          :prefix-icon="Search"
          clearable
          @clear="handleSearch"
          @input="handleSearch"
        />
      </div>
    </div>

    <el-table
      :data="filteredUsers"
      style="width: 100%"
      border
      v-loading="loading"
    >
      <el-table-column prop="username" label="用户名" width="180" />
      <el-table-column prop="role" label="当前角色" width="180" />
      <el-table-column prop="permissions" label="权限列表">
        <template #default="{ row }">
          <el-tag
            v-for="permission in row.permissions"
            :key="permission"
            class="permission-tag"
            :type="getPermissionType(permission)"
          >
            {{ permission }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <el-button
            type="primary"
            size="small"
            @click="handleEditPermissions(row)"
          >
            编辑权限
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 权限编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      title="编辑用户权限"
      width="50%"
    >
      <div v-if="selectedUser">
        <h3>{{ selectedUser.username }} 的权限设置</h3>
        <el-form label-width="120px">
          <el-form-item label="用户角色">
            <el-select v-model="selectedUser.role" placeholder="选择角色">
              <el-option label="管理员" value="admin" />
              <el-option label="普通用户" value="user" />
              <el-option label="访客" value="guest" />
            </el-select>
          </el-form-item>
          <el-form-item label="权限列表">
            <el-checkbox-group v-model="selectedUser.permissions">
              <el-checkbox label="read">读取权限</el-checkbox>
              <el-checkbox label="write">写入权限</el-checkbox>
              <el-checkbox label="delete">删除权限</el-checkbox>
              <el-checkbox label="admin">管理权限</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="savePermissions">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Search } from '@element-plus/icons-vue'

interface User {
  id: number
  username: string
  role: string
  permissions: string[]
}

const loading = ref(false)
const searchQuery = ref('')
const dialogVisible = ref(false)
const selectedUser = ref<User | null>(null)

// 模拟用户数据
const users = ref<User[]>([
  {
    id: 1,
    username: 'admin',
    role: 'admin',
    permissions: ['read', 'write', 'delete', 'admin']
  },
  {
    id: 2,
    username: 'user1',
    role: 'user',
    permissions: ['read', 'write']
  },
  {
    id: 3,
    username: 'guest1',
    role: 'guest',
    permissions: ['read']
  }
])

// 过滤用户列表
const filteredUsers = computed(() => {
  if (!searchQuery.value) return users.value
  return users.value.filter(user =>
    user.username.toLowerCase().includes(searchQuery.value.toLowerCase())
  )
})

// 处理权限编辑
const handleEditPermissions = (user: User) => {
  selectedUser.value = { ...user }
  dialogVisible.value = true
}

// 保存权限修改
const savePermissions = async () => {
  if (!selectedUser.value) return
  
  try {
    loading.value = true
    // TODO: 这里添加实际的API调用
    // await updateUserPermissions(selectedUser.value)
    
    // 更新本地数据
    const index = users.value.findIndex(u => u.id === selectedUser.value?.id)
    if (index !== -1) {
      users.value[index] = { ...selectedUser.value }
    }
    
    ElMessage.success('权限更新成功')
    dialogVisible.value = false
  } catch (error) {
    ElMessage.error('权限更新失败')
  } finally {
    loading.value = false
  }
}

// 处理搜索
const handleSearch = () => {
  // 搜索逻辑已通过计算属性实现
}

// 获取权限标签类型
const getPermissionType = (permission: string) => {
  const types: Record<string, string> = {
    read: 'info',
    write: 'success',
    delete: 'danger',
    admin: 'warning'
  }
  return types[permission] || 'info'
}
</script>

<style scoped>
.user-permissions-container {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-box {
  width: 300px;
}

.permission-tag {
  margin-right: 8px;
  margin-bottom: 4px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style> 